<template>
  <div class="dashboard-container">
    <div class="header">
      <span class="news">最新公告 <i class="el-icon-caret-right"></i></span>
      <el-carousel height="70px" direction="vertical" :autoplay="true" style="width: 90%;" indicator-position="none">
        <el-carousel-item v-for="(item, index) in tableDataList" :key="index">
          <h3 class="medium"><span style="width: 30%;">~{{ item.title }}</span> <span style="width: 30%;">~{{
        item.content }}</span> <span style="width: 30%;">~{{ item.createtime }}</span> <span
              style="color: #4995f7;" class="more">更多</span></h3>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="echarts-bgc" style="display: flex;flex-wrap: wrap;">
      <div class="xitong"
        style="width: 23%;margin:1%;border-radius: 10px;;height:100px;padding:10px;display: flex;justify-content: space-between;background-color: #fff;">
        <i class="el-icon-user-solid" style="color: #4995f7;font-size:80px;margin-left: 100px;"></i>
        <div class="text" style="margin-right: 100px;">
          <div style="margin-top: 5px;font-size:40px;font-weight: bold;">{{ this.total1 }}</div>
          <div style="margin-top: 5px;font-size:14px;">系统用户统计</div>
        </div>
      </div>
      <div class="xitong"
        style="width: 23%;margin:1%;border-radius: 10px;;height:100px;padding:10px;display: flex;justify-content: space-between;background-color: #fff;">
        <i class="el-icon-tickets" style="color: rgb(174, 232, 106);font-size:80px;margin-left: 100px;"></i>
        <div class="text" style="margin-right: 100px;">
          <div style="margin-top: 5px;font-size:40px;font-weight: bold;">{{ this.total2 }}</div>
          <div style="margin-top: 5px;font-size:14px;">计费订单数量统计</div>
        </div>
      </div>
      <div class="xitong"
        style="width: 23%;margin:1%;border-radius: 10px;;height:100px;padding:10px;display: flex;justify-content: space-between;background-color: #fff;">
        <i class="el-icon-truck" style="color: rgb(242, 185, 14);font-size:80px;margin-left: 100px;"></i>
        <div class="text" style="margin-right: 100px;">
          <div style="margin-top: 5px;font-size:40px;font-weight: bold;">{{ this.total3 }}</div>
          <div style="margin-top: 5px;">车位总量</div>
        </div>
      </div>
      <div class="xitong"
        style="width: 23%;margin:1%;border-radius: 10px;;height:100px;padding:10px;display: flex;justify-content: space-between;background-color: #fff;">
        <i class="el-icon-edit-outline" style="color: rgb(178, 139, 124);font-size:80px;margin-left: 100px;"></i>
        <div class="text" style="margin-right: 100px;">
          <div style="margin-top: 5px;font-size:40px;font-weight: bold;">{{ this.total4 }}</div>
          <div style="margin-top: 5px;">系统用户统计</div>
        </div>
      </div>
      <div class="echarts" style="width: 31%;margin:1%;">
        <div id="ech" style="width: 100%;height:400px;background-color: #fff;border-radius: 10px;padding:10px;"></div>
      </div>
      <div class="echarts" style="width: 32%;margin:1%;">
        <div id="echs2" style="width: 100%;height:400px;background-color: #fff;border-radius: 10px;padding:10px;"></div>
      </div>
      <div class="echarts" style="width: 31%;margin:1%;">
        <div id="echs3" style="width: 100%;height:400px;background-color: #fff;border-radius: 10px;padding:10px;"></div>
      </div>
      <div class="echarts" style="width: 69%;margin:0.5%;">
        <div id="echs4"
          style="width: 100%;height:400px;background-color: #fff;border-radius: 10px;padding:10px; height:350px;"></div>
      </div>
      <div class="tables" style="width: 29%;;margin:0.5%;">
        <el-table :data="tableDataList2" style="width: 100%;border-radius: 10px;height:300px;padding: 3%;">
          <el-table-column label="维修内容" width="150">
            <template slot-scope="scope">
              <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ scope.row.repaircontent
                }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报修时间" width>
            <template slot-scope="scope">
              <span>{{ scope.row.createtime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.resultstatus == 1">已修复</el-tag>
              <el-tag type="warning" v-else>待处理</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>


<script>
import Pagination from "@/components/Pagination";
import { ref, getCurrentInstance, onMounted } from "vue";
import html2canvas from "html2canvas";
import { mapGetters } from 'vuex'
import * as echarts from "echarts";
export default {
  name: 'Dashboard',
  data() {
    return {
      sendInfo: {
        currPage: 0,
        pageNum: 4,
      },
      dataMony: [],
      tableDataList: [],
      tableDataList2: [],
      option: {
        title: {
          text: '小区分布统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '小区分布',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 0, name: 'A区' },
              { value: 0, name: 'B区' },
              { value: 0, name: 'C区' },
              { value: 0, name: 'D区' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      total1: "",
      total2: "",
      total3: "",
      total4: "",
      option2: {
        title: {
          text: '车位数/已分配量/已缴费',
          left: 'left'
        },
        legend: { left: 'right' },
        tooltip: {},
        dataset: {
          source: [
            ['product', '车位数', '已分配量', '已缴费'],
            ['A区车位', 43.3, 85.8, 0],
            ['B区车位', 83.1, 73.4, 0],
            ['C区车位', 86.4, 65.2, 0],
            ['D区车位', 72.4, 53.9, 0]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      },
      option3: {
        title: {
          text: '缴费项目订单',
          left: "right"
        },
        legend: {
          data: ['计费项目'],
          left: "left"
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '电费单', max: 12 },
            { name: '水费固定月单', max: 12 },
            { name: '水费按量单', max: 12 },
            { name: '天然气单', max: 12 },
            { name: '物业费单', max: 12 },
            { name: '宽带费单', max: 12 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [12, 12, 2, 12, 12, 12],
                name: '计费项目'
              },
            ]
          }
        ]
      },
      option4: {
        title: {
          text: '当月用户访问量'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '23', '24', '25', '26', '27', '28', '29', '30', '31']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Video Ads',
            type: 'line',
            stack: 'Total',
            data: [0, 5, 0, 0, 9, 35, 2, 3, 7, 3, 5, 12, 3, 0, 2, 0, 0, 1, 1, 0, 2, 1, 2, 8, 0, 70, 23, 5, 0, 0, 0, 0]
          },
        ]
      },
      componentTotal: 0,
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  methods: {
    async getTableListData() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/poster/getPosterData?currPage=0&pageNum=100",
      );
      console.log(res);
      this.tableDataList = res.data;
    },
    async getTableListDatas() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/poster/getRepairData",
        {
          params: this.sendInfo
        }
      );
      console.log(res);
      this.tableDataList2 = res.data;
      this.componentTotal = res.data.total
    },
    setRows(n) {
      this.sendInfo.pageNum = n;
      this.getTableListDatas();
    },
    setPage(n) {
      this.sendInfo.currPage = n;
      this.getTableListDatas();
    },
    async getTableListData1() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/users/getUsersData?currPage=0&pageNum=4",
      );
      console.log(res);
      this.total1 = res.total;
    },
    async getTableListData2() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getPayMessage?currPage=0&pageNum=4",
      );
      console.log(res);
      this.total2 = res.total;
    },
    async getTableListData3() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkOrder?currPage=0&pageNum=4",
      );
      console.log(res);
      this.total3 = res.total;
    },
    async getTableListData4() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/poster/getFeedBack?currPage=0&pageNum=4",
      );
      console.log(res);
      this.total4 = res.total;
    },
    async getTableListData5() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=A&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[1][1] = res.total
      this.drawBar2()
    },
    async getTableListData6() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=A&parkstatus=1&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[1][2] = res.total
      this.drawBar2()
    },
    async getTableListData7() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=B&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[2][1] = res.total
      this.drawBar2()
    },
    async getTableListData8() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=B&parkstatus=1&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[2][2] = res.total
      this.drawBar2()
    },
    async getTableListData9() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=C&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[3][1] = res.total
      this.drawBar2()
    },
    async getTableListData10() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=C&parkstatus=1&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[3][2] = res.total
      this.drawBar2()
    },
    async getTableListData11() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=D&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[4][1] = res.total
      this.drawBar2()
    },
    async getTableListData12() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/parking/getParkData?parkname=D&parkstatus=1&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option2.dataset.source[4][2] = res.total
      this.drawBar2()
    },
    async getTableListData13() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=7&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[0] = res.total
      this.drawBar3()
    },
    async getTableListData14() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=8&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[1] = res.total
      this.drawBar3()
    },
    async getTableListData15() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=9&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[2] = res.total
      this.drawBar3()
    },
    async getTableListData16() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=10&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[3] = res.total
      this.drawBar3()
    },
    async getTableListData17() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=11&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[4] = res.total
      this.drawBar3()
    },
    async getTableListData18() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/cost/getCostData?c_id=12&currPage=0&pageNum=4",
      );
      console.log(res);
      this.option3.series[0].data[0].value[5] = res.total
      this.drawBar3()
    },
    async getTableListData18() {
      const { data: res } = await this.axios.get(
        "http://community.byesame.com/users/getLoginMonth",
      );
      console.log(res);
      this.dataMony = res
      this.dataMony.forEach(item => {
        let conts1 = 0
        if (item.createtime.indexOf('03-01') != -1) conts1++
        let conts2 = 0
        if (item.createtime.indexOf('03-02') != -1) {
          this.option4.series[0].data.push(conts1)
          conts2++
        }
      })
      console.log(this.option4.series[0].data)
      this.drawBar3()
    },

    // async handleList() {
    //   const { data: res } = await this.axios.get(
    //     "http://admin.bsmall.byesame.com/admin/stat/user",
    //     {
    //       headers: {
    //         "X-Litemall-Admin-Token": Cookies.get("vue_admin_template_token")
    //       }
    //     }
    //   );
    //   console.log(res);
    //   const rows = res.data.rows;
    //   rows.forEach(item => {
    //     this.option.xAxis[0].data.push(item.day);
    //     this.option.series[0].data.push(item.users);
    //   });
    //   this.drawBar();
    // },
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("ech")); // 绘制图表
      myChart.setOption(this.option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    drawBar2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("echs2")); // 绘制图表
      myChart.setOption(this.option2);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    drawBar3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("echs3")); // 绘制图表
      myChart.setOption(this.option3);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    drawBar4() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("echs4")); // 绘制图表
      myChart.setOption(this.option4);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.getTableListData()
    this.getTableListDatas()
    this.getTableListData1()
    this.getTableListData2()
    this.getTableListData3()
    this.getTableListData4()
    this.getTableListData5()
    this.getTableListData6()
    this.getTableListData7()
    this.getTableListData8()
    this.getTableListData9()
    this.getTableListData10()
    this.getTableListData11()
    this.getTableListData12()
    this.getTableListData13()
    this.getTableListData14()
    this.getTableListData15()
    this.getTableListData16()
    this.getTableListData17()
    this.getTableListData18()
    this.drawBar()
    this.drawBar2()
    this.drawBar3()
    this.drawBar4()
  },
  components: {
    Pagination
  }
}
</script>

<style lang="scss" scoped>
.echarts-bgc {
  width: 100%;
  background-color: #f0f0f0;
}

.header {
  width: 100%;
  display: flex;

  .news {
    margin-left: 70px;
    line-height: 70px;
    color: #4995f7;
  }
}

.el-carousel__item h3 {
  display: flex;
  position: relative;
  color: #000;
  font-size: 14px;
  opacity: 0.75;
  line-height: 70px;
  margin: 0;
  text-align: center;
  justify-content: space-between;

  .span {
    text-align: center;
    z-index: 100;
    line-height: 70px;
    font-size: 20px;
    font-weight: bold;
  }

  .more {
    cursor: pointer;
  }
}

.tables {
  background-color: #fff;
  border-radius: 10px;
}


.dashboard {

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
